import React from 'react';
import F2 from '@antv/f2';
import './style.scss'
export default class Chart extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			date: '2019-1-1',
			gains: 0,
			showTooltip: false,
			tag: 1,
			activeTab: 1,
		}
		this.data = [
			{
				date: '2017-06-05',
				value: 11.6,
				tag: 0,
			},
			{
				date: '2017-06-06',
				value: 12.9,
				tag: 0,
			},
			{
				date: '2017-06-07',
				value: 13.5,
				tag: 0,
			},
			{
				date: '2017-06-08',
				value: 8.6,
				tag: 2,
			},
			{
				date: '2017-06-09',
				value: 7.3,
				tag: 2,
			},
			{
				date: '2017-06-10',
				value: 8.5,
				tag: 0,
			},
			{
				date: '2017-06-11',
				value: 7.3,
				tag: 0,
			},
			{
				date: '2017-06-12',
				value: 6.8,
				tag: 0,
			},
			{
				date: '2017-06-13',
				value: 9.2,
				tag: 0,
			},
			{
				date: '2017-06-14',
				value: 13.0,
				tag: 1,
			},
			{
				date: '2017-06-15',
				value: 24.5,
				tag: 0,
			},
			{
				date: '2017-06-16',
				value: 13,
				tag: 0,
			},
			{
				date: '2017-06-17',
				value: 11.5,
				tag: 1,
			},
			{
				date: '2017-06-18',
				value: 11.1,
				tag: 0,
			},
			{
				date: '2017-06-19',
				value: 30.9,
				tag: 0,
			},
			{
				date: '2017-06-20',
				value: 20.6,
				tag: 1,
			},
			{
				date: '2017-06-21',
				value: 13.7,
				tag: 1,
			},
			{
				date: '2017-06-22',
				value: 12.8,
				tag: 1,
			},
			{
				date: '2017-06-23',
				value: 8.5,
				tag: 0,
			},
			{
				date: '2017-06-24',
				value: 9.4,
				tag: 1,
			},
			{
				date: '2017-06-25',
				value: 7.1,
				tag: 0,
			},
			{
				date: '2017-06-26',
				value: 10.6,
				tag: 0,
			},
			{
				date: '2017-06-27',
				value: 8.4,
				tag: 2,
			},
			{
				date: '2017-06-28',
				value: 9.3,
				tag: 0,
			},
			{
				date: '2017-06-29',
				value: 8.5,
				tag: 2,
			},
			{
				date: '2017-06-30',
				value: 7.3,
				tag: 0,
			},
		];
		this.tabList = [
			{ label: '近1月', value: 1 },
			{ label: '近3月', value: 3 },
			{ label: '近6月', value: 6 },
			{ label: '近1年', value: 12 },
		]
	}
	componentDidMount() {
		this.chart = new F2.Chart({
			el: this.myChart,
			pixelRatio: window.devicePixelRatio,
			padding: [45, 'auto', 'auto'],
		});
		this.chart.source(this.data, {
			value: {
				tickCount: 5,
				min: 0,
				formatter: (val) => {
					return val.toFixed(2) + '%';
				}
			},
			date: {
				type: 'timeCat',
				range: [0, 1],
				tickCount: 3,
			}
		});
		this.chart.axis('date', {
			label: function label(text, index, total) {
				var textCfg = {};
				if (index === 0) {
					textCfg.textAlign = 'left';
				} else if (index === total - 1) {
					textCfg.textAlign = 'right';
				}
				return textCfg;
			}
		});
		this.chart.axis('value', {
			label: function label(text, index, total) {
				var textCfg = {};
				if (index === 0) {
					textCfg.textBaseline = 'bottom';
				} else if (index === total - 1) {
					textCfg.textBaseline = 'top';
				}
				return textCfg;
			}
		});
		this.chart.legend({
			custom: true,
			itemWidth: null,
			items: [{
				name: '买入点',
				marker: 'circle',
				fill: '#F35833'
			}, {
				name: '卖出点',
				marker: 'circle',
				fill: '#518DFE'
			}]
		});
		this.chart.tooltip({
			showCrosshairs: true,
			custom: true, // 自定义 tooltip 内容框
			onChange: obj => {
				console.log(obj)
				const origin = obj.items[0].origin;
				this.setState({
					showTooltip: true,
					date: origin.date,
					gains: origin.value,
					tag: origin.tag,
				})
			},
			onHide: () => {
				this.setState({
					showTooltip: false,
				})
			}
		});
		this.chart.line().position('date*value').color('#518DFE');
		this.chart.point().position('date*value').size('tag', function (val) {
			return val ? 3 : 0;
		}).style('tag', {
			fill: function fill(val) {
				if (val === 2) {
					return '#518DFE';
				} else if (val === 1) {
					return '#F35833';
				}
			},
			stroke: '#fff',
			lineWidth: 1
		})
		this.chart.render();
	}
	onChangeTab(value) {
		console.log(value)
		this.setState({
			activeTab: value
		})
	}
	render() {
		return (
			<div className="chart-page">
				<canvas ref={el => (this.myChart = el)}></canvas>
				{this.state.showTooltip ? <div className="tooltipwrap">
					<p><span>{this.state.date}</span><span className=""></span></p>
					<div><span>涨幅:</span><span>{this.state.gains + '%	'}</span></div>
				</div> : null}
				<div className="tab">
					{
						this.tabList.map(item => (
							<div
								key={item.value}
								onClick={this.onChangeTab.bind(this, item.value)}
								className={`tab-button ${this.state.activeTab == item.value ? 'tab-active' : ''}`}>{item.label}</div>
						))
					}
				</div>
			</div>
		);
	}
}
